<template>
  <li>
    <label>
      <input @click="changedone(todo.id)" type="checkbox" :checked="todo.done">
      <span v-show="!todo.isEdit">{{ todo.title }}</span>
      <input ref="inputtitle" v-if="todo.isEdit" :value="todo.title" @keydown.enter="endedit" @blur="endedit">
    </label>
    <button class="btn btn-danger" @click="del(todo.id)">删除</button>
    <button class="btn btn-danger" @click="edit">编辑</button>
  </li>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "TodoItem",
  props:["todo" ],
  methods:{
    changedone(id){
      // this.change(id)
      this.$bus.$emit('change',id)
    },
    del(id){
      if(confirm("是否确认？")){
        // this.deltodo(id)
        // this.$bus.$emit('deltodo',id)
        pubsub.publish('deltodo',id)
        console.log(id)
      }
    },
    edit(){
      this.todo.isEdit=true
      //会在更新UI之后执行，不然没有输入框，就不能得到焦点
      this.$nextTick(function (){
        this.$refs.inputtitle.focus()
      })
    },
    endedit(event){
      this.todo.title=event.target.value
      this.todo.isEdit=false
    }
  }
}
</script>

<style scoped>
  li{
    list-style: none;
    margin: 2px;
    padding: 2px;
    width: 300px;
  }
  li:hover{
    background-color: #00d6b2;
  }
  li button{
    float: right;
    display: none;
  }
  li:hover button{
    display: block;
  }
  input[type=text]{
    width: 150px;
  }
</style>
